<template>
	<view class="page">
		<view class="dates">
			<template v-for="(item, index) in dates" :key="index">
				<view :class="`row ${currentIndex == index ? 'active' : ''}`" @click="chooseDate(index)">
					<view class="t">{{ item.name }}</view>
					<view class="b">{{ item.value }}</view>
				</view>
			</template>
			<view class="row" @click="dateshow = true">
				<view class="lf">
					<view>更多</view>
					<view>日期</view>
				</view>
				<view class="rg">></view>
			</view>
		</view>
		<u-calendar
			:show="dateshow"
			:minDate="minDate"
			:maxDate="maxDate"
			:defaultDate="defaultDate"
			mode="range"
			allowSameDay
			closeOnClickOverlay
			round="15"
			:monthNum="monthNum"
			@confirm="dateconfirm"
			:startText="startText"
			:endText="endText"
			@close="dateshow = false"
		></u-calendar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentIndex: 0,
			dateshow: false,
			defaultDate: '2024-11-26'
		}
	},
	props: {
		current: {
			type: Number,
			default: 0
		},
		minDate: {
			type: String,
			default: () => {
				return '2024-06-01'
			}
		},
		maxDate: {
			type: String,
			default: '2025-12-31'
		},
		monthNum: {
			type: Number,
			default: 20
		},
		startText: {
			type: String,
			default: '开始'
		},
		endText: {
			type: String,
			default: '结束'
		}
	},
	computed:{
		dates() {
			let date = this.getDates()
			return Object.keys(date).map(item => ({
				name: item,
				value: date[item]
			}))
		}
	},
	mounted() {
		this.chooseDate(this.current)
	},
	methods: {
		chooseDate(e){
			this.currentIndex = e;
			this.defaultDate = [
				new Date().getFullYear() + '-' + this.dates[e]['value'],
				new Date().getFullYear() + '-' + this.dates[e]['value']
			];
			this.$emit('setTime', this.dates[e]['value'])
		},
		dateconfirm(e) {
			this.dateshow = false
			this.$emit('confirmTime', e)
		},
		getDates() {
			const getFormattedDate = (date) => {
			  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以需要加 1
			  const day = String(date.getDate()).padStart(2, '0');
			  return `${month}-${day}`;
			}
			const getDayOfWeek = (date) => {
			  const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			  return daysOfWeek[date.getDay()];
			}
			const today = new Date();
			const tomorrow = new Date(today);
			tomorrow.setDate(today.getDate() + 1);
			const dayAfterTomorrow = new Date(today);
			dayAfterTomorrow.setDate(today.getDate() + 2);
			const twoDaysAfterTomorrow = new Date(today);
			twoDaysAfterTomorrow.setDate(today.getDate() + 3);
			const func = getFormattedDate;
			return {
				'今天': func(today),
				'明天': func(tomorrow),
				'后天': func(dayAfterTomorrow),
				[getDayOfWeek(twoDaysAfterTomorrow)]: `${func(twoDaysAfterTomorrow)}`
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	margin-top: 10px;
	width: 100%;
	.dates {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.row {
			width: calc(20% - 4px);
			padding: 10px 0px;
			box-sizing: border-box;
			border: 1px solid #e7e7e7;
			display: flex;
			justify-content: center;
			border-radius: 6px;
			flex-wrap: wrap;
			font-size: 14px;
			.t,
			.b {
				width: 100%;
				text-align: center;
			}
			.lf {
				width: 60%;
				text-align: center;
				padding-left: 3px;
				color: #0ec148;
			}
			.rg {
				flex: 1;
				padding-right: 3px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #0ec148;
			}
			&.active {
				color: #0ec148;
				border-color: #0ec148;
				background: #0ec14824;
			}
		}
	}
}
</style>
